<template>
  <div class="weight_control">
    <report-card
      :pageNum="3"
      :titleList="['weight_control_1002', 'weight_control_1002', 'weight_control_1002']"
    >
      <div slot="firstPage" class="weight_one">
        <div class="weight_one_table">
          <div v-for="item in tableDate" :key="item.name" class="weight_one_table_item flex">
            <p class="weight_one_table_left weight_one_table_value">{{ i18n.t(item.name) }}</p>
            <p class="weight_one_table_value flex-center-center">{{ item.value }}{{ item.unit }}</p>
          </div>
        </div>
      </div>
      <div slot="morePageOne" class="page_two">
        <div class="page_two_describe">
          {{ i18n.t('weight_control_1006') }}
        </div>
        <div class="page_two_describe">
          {{ i18n.t('weight_control_1007') }}
        </div>
      </div>
      <div class="page_three" slot="lastPage">
        <table class="table" cellspacing="0">
          <tr class="">
            <td class="border_right background_color1 border_top">≤70</td>
            <td class="border_top">
              {{ i18n.t('weight_control_1008') }}
            </td>
          </tr>
          <tr class="">
            <td class="border_right background_color1 border_top">70-90</td>
            <td class="border_top">{{ i18n.t('weight_control_1009') }}</td>
          </tr>
          <tr class="border_top border_bottom">
            <td class="border_right background_color1 border_top border_bottom">≥90</td>
            <td class="border_top border_bottom">{{ i18n.t('weight_control_1010') }}</td>
          </tr>
        </table>

        <p class="report_description">{{ i18n.t('weight_control_1011') }}</p>
      </div>
    </report-card>
  </div>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator'
import ReportCard from './reportCard/index.vue'
import { boundariesAverage, toFixedNumber } from '@/assets/ts/eight_electrodes_report/Util'
import { calcUnitValue, calcUnit } from '@/assets/ts/eight_electrodes_report/Util'
import getMeasureData, { consts, ReportItem } from '@yolanda-qn/eight-electrodes-report-lib'
import { TypedScaleData, TypedConfig } from '@yolanda-qn/eight-electrodes-report-lib/dist/types/src/typings'

@Component({ components: { ReportCard } })
export default class extends Mixins() {
  @Prop() measureData!: TypedScaleData
  @Prop() weight_unit!:  consts.WeightUnitEnum
  @Prop() config!: TypedConfig

  tableDate: Array<{ name: string; value: number | string; unit: string }> = []
  mounted() {
    const measureData = this.measureData
    
    const ReportIdsMapping = consts.ReportBuilderIdsEnum
    const pickReports = getMeasureData(this.measureData, {
      ...this.config,
      builderIds:[
        ReportIdsMapping.Bone,
        ReportIdsMapping.WaterMass,
        ReportIdsMapping.ProteinMass,
      ]
    })
    /**
     * 标准的去脂体重计算方式    FFM
     * 体水分，蛋白质，无机盐标准范围中值相加，也就是范围最大值加最小值的平均值
     *
     * 实测去脂体重计算方式 reallyFFM
     * 体水分，蛋白质，无机盐值相加
     *
     * 肌肉控制计算过程  muscleControl
     * 1.求标准的去脂体重（FFM）：范围中值
     * 2.测得的去脂体重（FFM） - 范围中值 > 0?
     * 则 肌肉控制 = 0；（肌肉超过标准值不需要控制）
     * 否则 肌肉控制 = 范围中值 - 测得的去脂体重；
     */
    let FFM = 0 // 标准的去脂体重
    let reallyFFM = 0
    let muscleControl = 0
    pickReports.map((item: any) => {
      FFM += boundariesAverage(item.boundaries)
      reallyFFM += toFixedNumber(item.value,2)
    })
    if (FFM > reallyFFM) muscleControl = FFM - reallyFFM

    /**
     * 脂肪控制计算过程 fatControl
     *
     * 男：体脂正常范围10% ~ 20% 取中值 15%
     * 女：体脂正常范围18% ~ 28% 取中值 23%
     * 脂肪控制 = 体重 x （15% or 23 %） - 测量脂肪量
     */
    const bodyFatRange = measureData.gender === 1 ? 0.15 : 0.23
    // 旧算法
    // let fatControl = measureData.weight * (bodyFatRange - measureData.bodyfat / 100)
    // 新算法
    let fatControl = (bodyFatRange * (measureData.weight + muscleControl) - measureData.bodyfat * measureData.weight * 0.01) / (1 - bodyFatRange);
    /**
     * 体重控制计算过程 weightControl
     * 体重控制为： 脂肪控制值 + 肌肉控制值
     */
    const weightControl = fatControl + muscleControl
    /**
     * 标准体重计算过程 weightStandard
     * 标准体重 = 测量体重 + 体重控制值
     */
    const weightStandard =  toFixedNumber(measureData.weight, 1) + weightControl;
    /**
     * 赋值
     */
    this.tableDate = [
      {
        name: 'fat_analysis_1027',
        value: weightStandard,
        unit: this.weight_unit,
        ignoreSignal: true,
      },
      {
        name: 'weight_control_1002',
        value: weightControl,
        unit: this.weight_unit,
      },
      {
        name: 'weight_control_1003',
        value: fatControl,
        unit: this.weight_unit,
      },
      {
        name: 'weight_control_1004',
        value: muscleControl,
        unit: this.weight_unit,
      },
      // {
      //   name: 'weight_control_1005',
      //   value: (this.measureData.score).toFixed(0) || 0,
      //   unit: this.i18n.t('obesity_analysis_1019'),
      // },
    ].map((item) => ({
      ...item,
      ...this.handleValueAddPlus(item),
    }));
  }
  handleValueAddPlus(item: { value: number; unit: string; ignoreSignal?: boolean }) {
    const { value, ignoreSignal } = item;
    let signal = '';
    if (!ignoreSignal && value > 0) {
      signal = '+';
    }
    const reportItem = new ReportItem();
    reportItem.setIsNeedTransformWeightValueByUnit(true);
    reportItem.setValue(value);
    reportItem.setUnitValue(this.config.weightUnit);
    const reportItemObject = reportItem.toObject();
    // 对st_lb展示格式处理一下
    if (reportItemObject.unitValue === consts.WeightUnitEnum.st_lb) {
      reportItemObject.value = `${reportItemObject.value}`.replace(':', 'st.') + 'lb';
      reportItemObject.unit = '';
    }

    return {
      value: `${signal}${reportItemObject.value}`,
      unit: reportItemObject.unit,
    };
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/main.scss';
@import '../index.scss';
.weight_control {
  .page_two {
    padding: rem(10) rem(24) 0;
    .page_two_describe {
      color: $secondaryColor;
      font-size: rem(26);
      line-height: rem(37);
      padding-left: rem(28);
      position: relative;
      &::before {
        position: absolute;
        content: '';
        display: block;
        width: rem(12);
        height: rem(12);
        background: var(--mainColor1);
        left: 0;
        top: rem(16);
        margin: auto;
        border-radius: 50%;
      }
    }
  }
  .page_three {
    padding: rem(30) rem(24);
    .table {
      width: rem(654);
      height: rem(204);
      text-align: center;
      font-size: rem(26);
      .background_color1 {
        background-color: rgba(246, 247, 248, 1);
      }
      .background_color2 {
        background-color: rgba(255, 255, 255, 1);
      }
      .border_right {
        width: rem(180);
        border-right: rem(2) solid rgba(238, 238, 238, 1);
      }
      .border_top {
        border-top: rem(2) solid rgba(238, 238, 238, 1);
      }
      .border_bottom {
        border-bottom: rem(2) solid rgba(238, 238, 238, 1);
      }
    }
  }
}
.weight_one {
  padding: 0 rem(24) rem(37);
  .weight_one_table {
    border: rem(2) solid $primaryBorder;
    text-align: center;
    color: rgba(42, 46, 49, 1);
    font-size: rem(26);
    .weight_one_table_item {
      line-height: rem(37);
      background: #f4f5f6;
      &:nth-child(2n) {
        background: #ffffff;
      }
    }
    .weight_one_table_value {
      flex: 1;
    }
    .weight_one_table_left {
      padding: rem(15) 0;
      border-right: rem(2) solid $primaryBorder;
    }
  }
}
</style>
